<template>
	<view class="SubmitOrder">
		<u-toast ref="uToast"></u-toast>
		<u-navbar title="提交订单" :placeholder="true" :auto-back="true"></u-navbar>
		<u-loading-page :loading="!detail"></u-loading-page>
		<u-datetime-picker
			:show="timeShow"
			v-model="params.activitytime"
			mode="date"
			@cancel="timeShow=false"
			@confirm="timeShow=false"
			:min-date="new Date().getTime()"
		></u-datetime-picker>
		<view v-if="detail" class="order_box">
			<view class="order_top">
				<view class="flex_box flex_row_between circuit_box">
					<u-image width="160rpx" height="160rpx" radius="12rpx" :src="detail.image"></u-image>
					<view class="circuit_content">
						<view class="circuit_name u-line-2">{{detail.title}}</view>
						<view class="circuit_sub u-line-1">{{detail.ticket}}</view>
						<view class="flex_box circuit_b">
							<view class="circuit_price">￥<text>{{detail.price}}</text></view>
							<view class="circuit_num">x1</view>
						</view>
					</view>
				</view>
				<view class="flex_box flex_row_between time_box">
					<view class="time_title">预约时间选择</view>
					<view @click="timeShow = true" class="flex_box">
						<view v-if="params.activitytime!=''" class="time_num">{{params.activitytime | date('yyyy-mm-dd')}}</view>
						<view v-if="params.activitytime==''" class="time_num time_num1">请选择预约时间</view>
						<u-icon color="#1E272E" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="visitor_box">
				<view class="visitor_title">游客信息</view>
				<view class="flex_box visitor_main">
					<view @click.stop="check(index)" v-if="index < 2" v-for="(item,index) in list" :key="index" class="flex_box flex_row_center visitor_item" :class="{'visitor_item1': visitorIds.indexOf(item.id)>-1}">
						<view>{{item.name}}</view>
					</view>
					<view @click="$goUrl('/pages/mine/travel/travel','to',{from: 'order'})" class="flex_box flex_row_center visitor_item">
						<view>更多</view>
						<u-icon size="20rpx" color="#1E272E" name="arrow-right"></u-icon>
					</view>
				</view>
				<view v-for="(item,index) in visitorList" :key="index" class="visitor_info">
					<view class="visitor_info_item">
						<u-form-item label="旅客姓名" label-width="180rpx">
							<u-input v-model="item.name" disabled disabled-color="transparent" input-align="right" border="none" placeholder="请输入旅客姓名"></u-input>
						</u-form-item>
					</view>
					<view class="visitor_info_item">
						<u-form-item label="手机号码" label-width="180rpx">
							<u-input v-model="item.mobile" disabled disabled-color="transparent" input-align="right" border="none" placeholder="请输入旅客手机号码"></u-input>
						</u-form-item>
					</view>
					<view class="visitor_info_item">
						<u-form-item label="身份证" label-width="180rpx">
							<u-input v-model="item.identity" disabled disabled-color="transparent" input-align="right" border="none" placeholder="请输入旅客身份证"></u-input>
						</u-form-item>
					</view>
				</view>
			</view>
			<view class="flex_box flex_row_between buy_box">
				<view class="flex_box">
					<view class="buy_text">实付款</view>
					<view class="buy_price">￥<text>{{detail.price}}</text></view>
				</view>
				<u-button throttleTime="1000" @click="submit" :custom-style="{width: '208rpx',height: '76rpx',margin: 0}" color="#45B9A2" shape="circle" text="提交订单"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		circuitDetail,
		visitorList,
		makeOrder,
		makeOrderPay
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				params: {
					scenic_id: '',
					activitytime: '',
					address: ''
				},
				detail: null,
				timeShow: false,
				list: [],
				visitors: [],                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
			}
		},
		onLoad(options) {
			that = this;
			if(options.id) that.params.scenic_id = options.id
			that.getDetail()
		},
		onShow() {
			that.getList()
		},
		methods: {
			getDetail(){
				circuitDetail({id: that.params.scenic_id}).then(res => {
					that.detail = res.data;
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			getList(){
				visitorList().then(res => {
					that.list = res.data;
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			check(e){
				if(that.detail.category_id == 1){
					if(that.visitorIds.indexOf(that.list[e].id) < 0){
						that.visitorIds.push(that.list[e].id)
						that.visitorList.push(that.list[e])
					}else{
						that.visitorIds.splice(e,1)
						that.visitorList.splice(e,1)
					}
					uni.$u.vuex('visitorIds', that.visitorIds);
					uni.$u.vuex('visitorList', that.visitorList);
				}
			},
			async submit(){
				if(that.params.activitytime === ''){
					uni.$u.toast('请选择预约时间')
					return
				}
				that.params.address = that.visitorIds.join(',');
				if(that.params.address === ''){
					uni.$u.toast('请选择游客信息')
					return
				}
				let params = {
					scenic_id: that.params.scenic_id,
					activitytime: parseInt(that.params.activitytime/1000),
					address: that.params.address
				}
				
				if(parseInt(that.detail.price) != 0){
					// #ifdef APP-PLUS
					params.pay_type = 1
					// #endif
					// #ifdef MP-WEIXIN
					params.pay_type = 2
					let codeInfo = await uni.login()
					params.code = codeInfo.code
					// #endif
					makeOrderPay(params).then(res => {
						// #ifdef APP-PLUS
						uni.requestPayment({
							"provider": "wxpay", 
							"orderInfo": {
								"appid": res.data.appid,  
								"noncestr": res.data.noncestr, // 随机字符串
								"package": res.data.package,        // 固定值
								"partnerid": res.data.partnerid ,      // 微信支付商户号
								"prepayid": res.data.prepayid, // 统一下单订单号 
								"timestamp": res.data.timestamp,        // 时间戳（单位：秒）
								"sign": res.data.sign // 签名，这里用的 MD5/RSA 签名
							},
							success() {
								console.log(res)
								that.$refs.uToast.show({
									type: "success",
									message: "购买成功",
									complete(){
										uni.switchTab({
											url: '/pages/travel/index/index'
										})
									}
								});
							},
							fail(e) {
								console.log(e)
								that.$refs.uToast.show({
									type: "error",
									message: "购买失败",
									complete(){
									}
								});
							}
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType + '',
							paySign: res.data.paySign + '',
							timeStamp: res.data.timeStamp + '',
							success(result) {
								that.$refs.uToast.show({
									type: "success",
									message: "购买成功",
									complete(){
										// uni.navigateBack();
										uni.switchTab({
											url: '/pages/travel/index/index'
										})
									}
								});
							},
							fail(result) {
								that.$refs.uToast.show({
									type: "error",
									message: "购买失败",
									complete(){
									}
								});
							},
						})
						// #endif
					}).catch(err => {
						uni.$u.toast(err.msg);
					})
				}else{
					makeOrder(params).then(res => {
						that.$refs.uToast.show({
							type: "success",
							message: "预约成功",
							complete(){
								uni.switchTab({
									url: '/pages/travel/index/index'
								})
							}
						});
					}).catch(err => {
						uni.$u.toast(err.msg);
					});
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.SubmitOrder{
		min-height: 100vh;
		background-color: #F6F8FA;
		.order_box{
			padding: 36rpx;
			.order_top{
				padding: 0 24rpx;
				background-color: #ffffff;
				border-radius: 12rpx;
				margin-bottom: 36rpx;
				.circuit_box{
					height: 208rpx;
					border-bottom: 2rpx dashed #e5e5e5;
					.circuit_content{
						width: 446rpx;
						.circuit_name{
							font-size: 28rpx;
							color: #1E272E;
							font-weight: bold;
							height: 80rpx;
							line-height: 40rpx;
						}
						.circuit_sub{
							font-size: 24rpx;
							color: #999999;
							height: 40rpx;
							line-height: 40rpx;
						}
						.circuit_b{
							height: 40rpx;
							.circuit_price{
								font-size: 24rpx;
								color: #FF3F34;
								font-weight: bold;
								text{
									font-size: 32rpx;
								}
							}
							.circuit_num{
								font-size: 32rpx;
								color: #D2DAE2;
								margin-left: 12rpx;
							}
						}
					}
				}
				.time_box{
					height: 88rpx;
					.time_title{
						font-size: 28rpx;
						color: #808E9B;
						font-weight: bold;
					}
					.time_num{
						font-size: 32rpx;
						color: #1E272E;
						text-align: right;
						width: 400rpx;
					}
					.time_num1{
						color: #999999;
					}
				}
			}
			.visitor_box{
				padding: 0 24rpx 24rpx;
				background-color: #ffffff;
				border-radius: 12rpx;
				margin-bottom: 140rpx;
				.visitor_title{
					font-size: 32rpx;
					color: #808E9B;
					font-weight: bold;
					line-height: 96rpx;
				}
				.visitor_main{
					.visitor_item{
						width: 194rpx;
						height: 64rpx;
						border-radius: 12rpx;
						border: 2rpx solid #808E9B;
						font-size: 28rpx;
						color: #1E272E;
						margin-right: 24rpx;
						&:last-child{
							margin: 0;
						}
					}
					.visitor_item1{
						color: #45B9A2;
						border: 2rpx solid #45B9A2;
					}
				}
				.visitor_info{
					border-bottom: 2rpx dashed #e5e5e5;
					&:last-child{
						border: none;
					}
					.visitor_info_item{
						border-bottom: 2rpx solid #F2F6F5;
						padding: 12rpx 0;
						&:last-child{
							border: none;
						}
					}
				}
			}
			.buy_box{
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 9;
				background-color: #ffffff;
				padding: 0 36rpx;
				width: 100%;
				height: 112rpx;
				.buy_text{
					font-size: 28rpx;
					color: #1E272E;
					font-weight: 500;
					margin-right: 12rpx;
				}
				.buy_price{
					font-size: 24rpx;
					color: #FF3F34;
					font-weight: bold;
					text{
						font-size: 48rpx;
					}
				}
			}
		}
	}
</style>
